<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>SocialV - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="static/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="static/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="static/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="static/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div id="container-inside">
        <div id="circle-small"></div>
        <div id="circle-medium"></div>
        <div id="circle-large"></div>
        <div id="circle-xlarge"></div>
        <div id="circle-xxlarge"></div>
    </div>
    <div class="container p-0">
        <div class="row no-gutters">
            <div class="col-md-6 text-center pt-5">
                <div class="sign-in-detail text-white">
                    <a class="sign-in-logo mb-5" href="#"><img src="static/images/logo-full.png" class="img-fluid"
                                                               alt="logo"></a>
                    <div class="owl-carousel" data-autoplay="true" data-loop="true" data-nav="false" data-dots="true"
                         data-items="1" data-items-laptop="1" data-items-tab="1" data-items-mobile="1"
                         data-items-mobile-sm="1" data-margin="0">
                        <div class="item">
                            <img src="static/images/login/1.png" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">Chat with people you hate</h4>
                            <p>Don't you just love it when you rightly call someone out on their bullshit & they try to
                                make you out to be the bad guy.</p>
                        </div>
                        <div class="item">
                            <img src="static/images/login/1.png" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">Listen your Spotify music</h4>
                            <p>Argue with someone about their music taste</p>
                        </div>
                        <div class="item">
                            <img src="static/images/login/1.png" class="img-fluid mb-4" alt="logo">
                            <h4 class="mb-1 text-white">Some other shit</h4>
                            <p>I dont have ideas lol</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 bg-white pt-5">
                <div class="sign-in-from">
                    <h1 class="mb-0">Sign in</h1>
                    <p>Enter your email address and password to access your account.</p>
                    {% if message %}
                    <h1>
                        <div class="alert alert-warning" role="alert">
                            <div class="iq-alert-icon">
                                <i class="ri-alert-line"></i>
                            </div>
                            <div class="iq-alert-text">{{message}}</div>
                        </div>
                    </h1>
                    {% endif %}
                    <form class="mt-4" action="" method="post">

                        {{ form.hidden_tag() }}

                        <div class="form-group">
                            <label for="exampleInputEmail2">Email address</label>
                            {{form.email(class="form-control mb-0", type="email", id="exampleInputEmail2",
                            placeholder="Enter email")}}
                            {% for error in form.email.errors %}
                            <div class="alert alert-danger" role="alert">
                                <div class="iq-alert-icon">
                                    <i class="ri-information-line"></i>
                                </div>
                                <div class="iq-alert-text">{{error}}</div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">{{form.password.label}}</label>
                            {{form.password(type="password", class="form-control mb-0", id="exampleInputPassword1",
                            placeholder="Password")}}
                            {% for error in form.password.errors %}
                            <div class="alert alert-danger" role="alert">
                                <div class="iq-alert-icon">
                                    <i class="ri-information-line"></i>
                                </div>
                                <div class="iq-alert-text">{{error}}</div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="d-inline-block w-100">
                            <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
                                {{form.remember_me(type="checkbox", class="custom-control-input", id="customCheck1")}}
                                <label class="custom-control-label" for="customCheck1"></a>
                                    {{form.remember_me.label}}</label>
                            </div>
                            <button type="submit" class="btn btn-primary float-right">Sign Up</button>
                        </div>

                        <div class="sign-info">
                            <span class="dark-color d-inline-block line-height-2">Dont have an Account ? <a
                                    href="/register">Sign Up</a></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="static/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="static/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="static/js/waypoints.min.js"></script>
<script src="static/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="static/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="static/js/apexcharts.js"></script>
<!-- lottie JavaScript -->
<script src="static/js/lottie.js"></script>
<!-- Slick JavaScript -->
<script src="static/js/slick.min.js"></script>
<!-- Select2 JavaScript -->
<script src="static/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="static/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="static/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="static/js/smooth-scrollbar.js"></script>
<!-- Chart Custom JavaScript -->
<script src="static/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="static/js/custom.js"></script>
</body>
</html>
